<template>
  <el-card class="box-card">
    <el-form :inline="true" :model="form">
      <el-form-item label="短信签名" prop="mail">
        <el-input v-model="form.signature" placeholder="请输入短信签名" />
      </el-form-item>
      <el-form-item label="启用状态" prop="username">
        <el-select v-model="form.status" placeholder="请选择启用状态">
          <el-option label="启用" value="Y"></el-option>
          <el-option label="禁用" value="N"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="创建时间">
        <el-date-picker
          v-model="date"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          :default-time="['00:00:00', '23:59:59']"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="选择日期时间"
        ></el-date-picker>
      </el-form-item>
      <el-form-item style="float: right">
        <el-button type="success" v-if="$formatFR(channel.add)" @click="handleAdd">新增</el-button>
        <el-button type="primary" @click="search">搜索</el-button>
        <el-button @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格部分 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="index" label="序号" width="50" align="center" />
      <el-table-column label="短信签名" align="center" prop="signature" />
      <el-table-column label="渠道编码" align="center" prop="code">
        <template v-slot="scope">
          {{ codeComputed(scope.row.code) }}
        </template>
      </el-table-column>
      <el-table-column label="启用状态" align="center" prop="status">
        <template v-slot="scope">
          <el-tag v-if="scope.row.status == 'Y'">启用</el-tag>
          <el-tag type="info" v-if="scope.row.status == 'N'">禁用</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="短信 API 的账号" align="center" prop="apiKey" />
      <el-table-column label="短信 API 的密钥" align="center" prop="apiSecret" />
      <el-table-column label="短信发送回调 URL" align="center" prop="callbackUrl" />
      <el-table-column label="备注" align="center" prop="remark" show-overflow-tooltip />
      <el-table-column label="创建时间" align="center" prop="createTime"></el-table-column>
      <el-table-column label="操作" align="center" width="180">
        <template v-slot="scope">
          <el-button
            type="warning"
            size="mini"
            v-if="$formatFR(channel.edit)"
            plain
            @click="handleUpdate(scope.row)"
          >
            编辑
          </el-button>
          <el-button
            type="danger"
            size="mini"
            v-if="$formatFR(channel.del)"
            plain
            @click="handleDel(scope.row.id)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <Pagination
      :size.sync="form.size"
      :current.sync="form.current"
      :total="total"
      @pagination="getList"
    />
    <AddEditDialog ref="AddEditDialog" @updatePage="reset" />
  </el-card>
</template>

<script>
import { page, del } from "@/api/message/sms/channel"
import AddEditDialog from "./components/AddEditDialog"
import FUNCROLELIST from "@/utils/func_role/message"
export default {
  components: {
    AddEditDialog
  },
  data() {
    return {
      channel: FUNCROLELIST.sms.channel,
      codeList: [],
      form: {
        size: 10,
        current: 1
      },
      date: [],
      total: 0,
      tableData: []
    }
  },
  created() {
    this.codeList = this.$store.getters.dictList(this.$DICT_TYPE.SMS_CHANNEL_CODE)
    console.log(this.$store.getters.dictList(this.$DICT_TYPE.SMS_CHANNEL_CODE))
  },
  computed: {
    codeComputed() {
      return function (v) {
        const info = this.codeList.find((e) => e.value == v)
        if (info) {
          return info.label
        } else {
          return ""
        }
      }
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    reset() {
      this.form = {
        size: 10,
        current: 1
      }
      this.date = []
      this.getList()
    },
    handleAdd() {
      this.$refs.AddEditDialog.init(null, "新增")
    },
    handleDel(id) {
      this.$confirm("请确认是否删除当前内容?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        del(id).then(() => {
          this.getList()
          this.$message({
            type: "success",
            message: "删除成功!"
          })
        })
      })
    },
    handleUpdate(scope) {
      this.$refs.AddEditDialog.init(scope, "编辑")
    },
    search() {
      this.form.current = 1
      this.getList()
    },

    async getList() {
      const params = {
        ...this.form
      }
      if (this.date != null) {
        params.startTime = this.date[0]
        params.endTime = this.date[1]
      }
      const { data } = await page(params)
      this.tableData = data.records
      this.total = data.total
    }
  }
}
</script>

<style lang="scss" scoped>
.dropdown-item-p {
  display: inline;
}
.dropdown {
  margin-left: 10px;
}
</style>
